<template>
	<view class="mine">
		<uni-nav-bar title="我的" color="#fff" backgroundColor="#39A0FF" :border="false" statusBar></uni-nav-bar>
		<environment></environment>
		<!-- 头部 -->
		<HeaderBox @toBindPhone="openPhonePad" />
		<view class="package space-between" style="min-height:100rpx;" @click="navTo('solutionAccount/solutionList')">
			<view>车用尿素溶液存量</view>
			<view>{{userInfo.amount}}公斤 <uni-icons type="forward" size="20"></uni-icons></view>
		</view>
		<view class="package space-between invite" style="background: linear-gradient(-24deg, #FDE3C0, #FFF1DF);"
			@click="navTo('invitation/invitation')">
			<view class="direction-start">
				<text style="font-size: 36rpx;">邀新客领蓝宝石</text>
				<text style="font-size: 26rpx;margin-top:5rpx">千元蓝宝石等您来拿</text>
			</view>
			<view>点击进入</view>
		</view>
		<view class="package space-between" style="min-height:100rpx;" @click="carPop()" v-if="!userInfo.cart_code">
			<view>验证车牌号</view>
			<view style="color:#41a3ff;">前往验证>></view>
		</view>
		<!-- 功能列表 -->
		<MenuList />
		<view class="submit" @click="follow()">关注公众号</view>
		<!-- 底部功能按钮 -->
		<bottomFil :active="4"></bottomFil>
	</view>
	<!-- 绑定手机号码弹框 -->
	<uni-popup ref="popup" type="bottom" :is-mask-click="false" style="z-index: 910">
		<PhonePad type="bind" @close="closePhonePad" />
	</uni-popup>
	<webWechat></webWechat>
	<!-- 验证绑定车牌号 -->
	<AddCar ref="car"></AddCar>
	<!-- 账户充值到账 -->
	<ReceivedPop ref="received" @changes="changes()"></ReceivedPop>
</template>

<script setup lang="ts">
	import bottomFil from '@c/pobulic/bottomFil.vue';
	import { navTo } from '@/utils/navigator';
	import PhonePad from '@c/common/PhonePad.vue';
	import HeaderBox from '@c/mine/HeaderBox.vue';
	import AddCar from '@c/mine/addCar.vue';
	import MenuList from '@c/mine/MenuList.vue';
	import ReceivedPop from '@c/pobulic/Received.vue';
	import { useUserStore } from '@/stores/user';
	import { onShow, onPullDownRefresh } from '@dcloudio/uni-app';
	import { getDriverID } from '@/stores/driverID';
	import { follow } from '@/utils/copyText';
	import webWechat from '@c/pobulic/webWechat.vue';
	import environment from '@c/pobulic/environment.vue';
	import { ref } from 'vue';
	/**
	 * 个人中心主页
	 * @param userInfo 用户信息
	 * @param driver_id 用户ID
	 * @param curPage 小程序与公众号的状态切换
	 */
	const userInfo = useUserStore();
	const driver_id = getDriverID();
	const curPage = ref('')
	const car = ref(null)
	/**
	 * 监听是否存在用户登录信息
	 */
	onShow(() => {
		if (!uni.getStorageSync('storage_key').id || !driver_id) {
			uni.setStorageSync('storage', 'user');
			uni.reLaunch({
				url: '/pages/login/login',
			});
			return;
		}
		userInfo.getUserInfo();
		userInfo.Physicalamounte(driver_id);
		setTimeout(() => {
			curPage.value = 'map'
		}, 1000)
	});
	onPullDownRefresh(() => {
		userInfo.getUserInfo();
		uni.stopPullDownRefresh();
	})
	// refs
	const popup = ref(null);
	function openPhonePad() {
		popup.value.open();
	}
	function closePhonePad() {
		popup.value.close();
	}
	function changes() {
		userInfo.getUserInfo();
	}
	// 打开绑定车牌号
	function carPop() {
		car.value.open()
	}
</script>

<style scoped lang="less">
	.mine_center {
		width: 95%;
		margin: 15rpx 2.5%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		view {
			width: 49%;
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: white;
			border-radius: 5px;
			box-shadow: 1px 2px 4px 0px rgba(204, 204, 204, 0.5);

			image {
				width: 70rpx;
				height: 70rpx;
				margin-right: 20rpx;
			}

			text {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
	}

	.invite {
		height: 132rpx;

		view:nth-of-type(1) {
			color: #BE710D;
			font-weight: 500;
		}

		view:nth-of-type(2) {
			width: 170rpx;
			height: 58rpx;
			background: #FF950B;
			border-radius: 29rpx;
			text-align: center;
			line-height: 58rpx;
			color: #fff;
		}
	}

	.submit {
		width: 204px;
		height: 44px;
		background: linear-gradient(104deg, #41a3ff, #1b91ff);
		border-radius: 5px;
		font-size: 19px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 40rpx auto;
	}
</style>